<template>
  <div style="width: 420px;margin: 10px">
    <div style="text-align:center;font-size:20px;color:#606266;margin-bottom: 30px">
      <span>修改密码</span>
    </div>
    <el-form :model="form" :rules="rules" class="login-form" label-width="120px" ref="form">
      <el-form-item label="旧密码：" prop="originPassword">
        <el-input placeholder="旧密码" size="medium" prefix-icon="el-icon-lock" show-password
                  v-model="form.originPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="newPassword">
        <el-input placeholder="新密码" size="medium" prefix-icon="el-icon-lock" show-password
                  v-model="form.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="重复新密码：" prop="newPasswordRepeat">
        <el-input placeholder="重复新密码" size="medium" prefix-icon="el-icon-lock" show-password
                  v-model="form.newPasswordRepeat"></el-input>
      </el-form-item>
      <div style="text-align: center;margin-top: 30px">
        <el-button style="width: 160px;" type="primary" plain size="medium" autocomplete="off"
                   @click="doChangePassword">保存修改
        </el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "ChangePassword",
  data() {
    return {
      rules: {
        originPassword: [
          {required: true, message: '请输入旧密码', trigger: 'blur'},
        ],
        newPassword: [
          {
            required: true,
            message: '新密码为6~18位且必须同时包含字母、数字、特殊字符',
            trigger: 'blur',
            pattern: "^(?![0-9]+$)(?![a-zA-Z]+$)(?![0-9a-zA-Z]+$)(?![0-9\\W]+$)(?![a-zA-Z\\W]+$)[0-9A-Za-z\\W]{6,18}$"
          },
        ],
        newPasswordRepeat: [
          {
            required: true, message: '请与新密码保持一致', trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value === this.form.newPassword) {
                callback();
              } else {
                callback(new Error('控件下方红色小字提示信息'));
              }
            }
          }
        ],

      },
      form: {
        originPassword: '',
        newPassword: '',
        newPasswordRepeat: ''
      }
    }
  },
  methods: {
    doChangePassword() {
      let promise = this.$refs.form.validate();
      // 若验证表单通过
      promise.then(() => {
        this.request.post("/Administrator/chengePassword", {
          'aname': localStorage.getItem("aname"),
          'newPassword': this.form.newPassword,
          'oldPassword': this.form.originPassword,
        }).then(res => {
          if (!res) {
            this.$message.error("旧密码输出错误，修改失败");
          } else {
            this.$message.success("修改成功，请重新登录");
            localStorage.removeItem("aname");
            localStorage.removeItem("apassword");
            this.$router.replace("/login");
          }
        })
      }).catch(() => {

      });
    }
  }
}
</script>
<style scoped>

</style>